---
title: Accessibility
redirect_from:
  - /components/featureicon/accessibility/
---

## Accessibility

The FeatureIcon component displays an image representing a specific feature or ticket type.

### Accessibility Props

| Name | Type     | Default | Description                                                                  |
| :--- | :------- | :------ | :--------------------------------------------------------------------------- |
| alt  | `string` | `""`    | Text alternative for the icon, used by screen readers to describe the image. |

### Image Announcements and Alt Text

The `alt` attribute determines how screen readers announce the FeatureIcon:

- `alt=""` (default): Icon is treated as **decorative** and ignored by screen readers
- `alt="text"`: Screen readers will announce the provided text

### Best Practices

#### Empty alt text

- The icon has adjacent text describing the feature
- The icon is purely decorative and doesn't add meaningful information

```jsx
<Stack direction="row" align="center">
  <FeatureIcon name="TicketFlexi" alt="" />
  <Text>Flexi Ticket</Text>
</Stack>
```

Screen reader announces: "Flexi Ticket" (the icon is ignored)

#### Descriptive alt text

- The icon stands alone without accompanying text
- The icon conveys unique information

```jsx
<FeatureIcon name="TicketFlexi" alt="Flexible ticket option" />
```

Screen reader announces: "Flexible ticket option"

#### Avoid redundant information

```jsx
<!-- DON'T do this -->
<FeatureIcon name="TicketSaver" alt="Saver Ticket" />
<Text>Saver Ticket</Text>
```

Screen reader announces: "Saver Ticket, Saver Ticket" (redundant and confusing)
